<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/layui.css">
  <script src="./layui.js"></script>
</head>

<body>
  <input type="text" id="date2" placeholder="日历">
  <div>
    <table id="table"></table>
  </div>
  <input type="text" id="date" placeholder="日历">
  <div id="test12" class="demo-tree-more"></div>
</body>
<script>
  layui.use(['laydate', 'table'], function () {
    var laydate = layui.laydate;
    var table = layui.table;

    //执行一个laydate实例
    laydate.render({
      elem: '#date', //指定元素
      type: 'datetime',
      range: true
    });
    laydate.render({
      elem: '#date2', //指定元素
      type: 'datetime',
      range: true
    });


    table.render({
      elem: '#table' //指定原始表格元素选择器（推荐id选择器）
      , height: 'auto' //容器高度
      , cols: [[ //表头
        {
          title: 'ID', width: 80, sort: true, templet: function (d) {
            return `<div id="table${d.id}" onclick="showDropdown(${d.id})">${d.id}</div>`
          }
        }
        , { field: 'username', title: '用户名', width: 80 }
        , { field: 'sex', title: '性别', width: 80, sort: true }
        , { field: 'city', title: '城市', width: 80 }
        , { field: 'sign', title: '签名', width: 177 }
        , { field: 'experience', title: '积分', width: 80, sort: true }
        , { field: 'score', title: '评分', width: 80, sort: true }
        , { field: 'classify', title: '职业', width: 80 }
        , { field: 'wealth', title: '财富', width: 135, sort: true }
        , { field: 'username', title: '用户名', width: 80 }
        , { field: 'sex', title: '性别', width: 80, sort: true }
        , { field: 'city', title: '城市', width: 80 }
        , { field: 'sign', title: '签名', width: 177 }
        , { field: 'experience', title: '积分', width: 80, sort: true }
        , { field: 'score', title: '评分', width: 80, sort: true }
        , { field: 'classify', title: '职业', width: 80 }
        , { field: 'wealth', title: '财富', width: 135, sort: true }
        , { field: 'sex', title: '性别', width: 80, sort: true }
        , { field: 'city', title: '城市', width: 80 }
        , { field: 'sign', title: '签名', width: 177 }
        , { field: 'experience', title: '积分', width: 80, sort: true }
        , { field: 'score', title: '评分', width: 80, sort: true }
        , { field: 'classify', title: '职业', width: 80 }
        , { field: 'wealth', title: '财富', width: 135, sort: true }
      ]]
      , page: true,
      data: [{
        id: '1',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '2',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '3',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '4',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '5',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '6',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '7',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '8',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '9',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }, {
        id: '10',
        username: '123',
        sex: '123',
        city: '123',
        sign: '123',
        classify: '123',
        score: '123',
        experience: '123',
        wealth: '123',
      }] //设置表头
      //,…… //更多参数参考右侧目录：基本参数选项
    });
  });
  function showDropdown(id) {
    id = 'table' + id
    layui.use('dropdown', function () {
      var dropdown = layui.dropdown
      dropdown.render({
        elem: `#${id}` //可绑定在任意元素中，此处以上述按钮为例
        , data: [{
          title: 'menu item 1'
          , id: 100
          , href: '#'
        }, {
          title: 'menu item 2'
          , id: 101
          , href: 'https://www.layui.com/' //开启超链接
          , target: '_blank' //新窗口方式打开
        }, { type: '-' }, {
          title: 'menu item 3'
          , id: 102
          , type: 'group'  //菜单类型，支持：normal/group/parent/-
          , child: [{
            title: 'menu item 3-1'
            , id: 103
          }, {
            title: 'menu item 3-2'
            , id: 104
            , child: [{
              title: 'menu item 3-2-1'
              , id: 105
            }, {
              title: 'menu item 3-2-2'
              , id: 106
            }]
          }, {
            title: 'menu item 3-3'
            , id: 107
          }]
        }, { type: '-' }, {
          title: 'menu item 4'
          , id: 108
        }, {
          title: 'menu item 5'
          , id: 109
          , child: [{
            title: 'menu item 5-1'
            , id: 11111
            , child: [{
              title: 'menu item 5-1-1'
              , id: 2111
            }, {
              title: 'menu item 5-1-2'
              , id: 3111
            }]
          }, {
            title: 'menu item 5-2'
            , id: 52
          }]
        }, { type: '-' }, {
          title: 'menu item 6'
          , id: 6
          , type: 'group'
          , isSpreadItem: false
          , child: [{
            title: 'menu item 6-1'
            , id: 61
          }, {
            title: 'menu item 6-2'
            , id: 62
          }]
        }]
        //菜单被点击的事件
        , click: function (obj) {
          console.log(obj);
          layer.msg('回调返回的参数已显示再控制台');
        }
      });
    })
  }


  layui.use(['tree', 'util'], function () {
    var tree = layui.tree
      , layer = layui.layer
      , util = layui.util

      //模拟数据
      , data = [{
        title: '一级1'
        , id: 1
        , field: 'name1'
        , checked: true
        , spread: true
        , children: [{
          title: '二级1-1 可允许跳转'
          , id: 3
          , field: 'name11'
          , href: 'https://www.layui.com/'
          , children: [{
            title: '三级1-1-3'
            , id: 23
            , field: ''
            , children: [{
              title: '四级1-1-3-1'
              , id: 24
              , field: ''
              , children: [{
                title: '五级1-1-3-1-1'
                , id: 30
                , field: ''
              }, {
                title: '五级1-1-3-1-2'
                , id: 31
                , field: ''
              }]
            }]
          }, {
            title: '三级1-1-1'
            , id: 7
            , field: ''
            , children: [{
              title: '四级1-1-1-1 可允许跳转'
              , id: 15
              , field: ''
              , href: 'https://www.layui.com/doc/'
            }]
          }, {
            title: '三级1-1-2'
            , id: 8
            , field: ''
            , children: [{
              title: '四级1-1-2-1'
              , id: 32
              , field: ''
            }]
          }]
        }, {
          title: '二级1-2'
          , id: 4
          , spread: true
          , children: [{
            title: '三级1-2-1'
            , id: 9
            , field: ''
            , disabled: true
          }, {
            title: '三级1-2-2'
            , id: 10
            , field: ''
          }]
        }, {
          title: '二级1-3'
          , id: 20
          , field: ''
          , children: [{
            title: '三级1-3-1'
            , id: 21
            , field: ''
          }, {
            title: '三级1-3-2'
            , id: 22
            , field: ''
          }]
        }]
      }, {
        title: '一级2'
        , id: 2
        , field: ''
        , spread: true
        , children: [{
          title: '二级2-1'
          , id: 5
          , field: ''
          , spread: true
          , children: [{
            title: '三级2-1-1'
            , id: 11
            , field: ''
          }, {
            title: '三级2-1-2'
            , id: 12
            , field: ''
          }]
        }, {
          title: '二级2-2'
          , id: 6
          , field: ''
          , children: [{
            title: '三级2-2-1'
            , id: 13
            , field: ''
          }, {
            title: '三级2-2-2'
            , id: 14
            , field: ''
            , disabled: true
          }]
        }]
      }, {
        title: '一级3'
        , id: 16
        , field: ''
        , children: [{
          title: '二级3-1'
          , id: 17
          , field: ''
          , fixed: true
          , children: [{
            title: '三级3-1-1'
            , id: 18
            , field: ''
          }, {
            title: '三级3-1-2'
            , id: 19
            , field: ''
          }]
        }, {
          title: '二级3-2'
          , id: 27
          , field: ''
          , children: [{
            title: '三级3-2-1'
            , id: 28
            , field: ''
          }, {
            title: '三级3-2-2'
            , id: 29
            , field: ''
          }]
        }]
      }]

      //模拟数据1
      , data1 = [{
        title: '江西'
        , id: 1
        , children: [{
          title: '南昌'
          , id: 1000
          , children: [{
            title: '青山湖区'
            , id: 10001
          }, {
            title: '高新区'
            , id: 10002
          }]
        }, {
          title: '九江'
          , id: 1001
        }, {
          title: '赣州'
          , id: 1002
        }]
      }, {
        title: '广西'
        , id: 2
        , children: [{
          title: '南宁'
          , id: 2000
        }, {
          title: '桂林'
          , id: 2001
        }]
      }, {
        title: '陕西'
        , id: 3
        , children: [{
          title: '西安'
          , id: 3000
        }, {
          title: '延安'
          , id: 3001
        }]
      }]

      //模拟数据2
      , data2 = [{
        title: '早餐'
        , id: 1
        , children: [{
          title: '油条'
          , id: 5
        }, {
          title: '包子'
          , id: 6
        }, {
          title: '豆浆'
          , id: 7
        }]
      }, {
        title: '午餐'
        , id: 2
        , checked: true
        , children: [{
          title: '藜蒿炒腊肉'
          , id: 8
        }, {
          title: '西湖醋鱼'
          , id: 9
        }, {
          title: '小白菜'
          , id: 10
        }, {
          title: '海带排骨汤'
          , id: 11
        }]
      }, {
        title: '晚餐'
        , id: 3
        , children: [{
          title: '红烧肉'
          , id: 12
          , fixed: true
        }, {
          title: '番茄炒蛋'
          , id: 13
        }]
      }, {
        title: '夜宵'
        , id: 4
        , children: [{
          title: '小龙虾'
          , id: 14
          , checked: true
        }, {
          title: '香辣蟹'
          , id: 15
          , disabled: true
        }, {
          title: '烤鱿鱼'
          , id: 16
        }]
      }];

    //基本演示
    tree.render({
      elem: '#test12'
      , data: data
      , showCheckbox: true  //是否显示复选框
      , id: 'demoId1'
      , isJump: true //是否允许点击节点时弹出新窗口跳转
      , click: function (obj) {
        var data = obj.data;  //获取当前点击的节点数据
        layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
      }
    });

    //按钮事件
    util.event('lay-demo', {
      getChecked: function (othis) {
        var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

        layer.alert(JSON.stringify(checkedData), { shade: 0 });
        console.log(checkedData);
      }
      , setChecked: function () {
        tree.setChecked('demoId1', [12, 16]); //勾选指定节点
      }
      , reload: function () {
        //重载实例
        tree.reload('demoId1', {

        });

      }
    });
  });

</script>

</html>